<template>
    <el-card shadow="never" class="border-0">
      <!-- 搜索 -->
      <Search :model="searchForm" @search="getData" @reset="resetSearchForm">
          <SearchItem label="关键词">
            <el-input v-model="searchForm.title" placeholder="商品标题" clearable></el-input>
          </SearchItem>
      </Search>
  
  
      <el-table default-expand-all :data="tableData" stripe style="width: 100%" v-loading="loading">
  
        <el-table-column type="expand">
          <template #default="{ row }">
            <div class="flex pl-18">
                <el-avatar :size="50" :src="row.user.avatar" fit="fill" class="mr-3"></el-avatar>
                <div class="flex-1">
                  <h6 class="flex items-center">
                    {{ row.user.nickname || row.user.username }}
                    <small class=" text-gray-400 ml-2">{{ row.review_time }}</small>
                    <el-button size="small" class="ml-auto" @click="openTextarea(row)"
                    v-if="!row.textareaEdit && !row.extra">回复</el-button>
                  </h6>
                  {{ row.review.data }}
                  <div class="py-2">
                    <el-image v-for="(item,index) in row.review.image" :key="index" :src="item" fit="cover" :lazy="true" style="width: 100px;height: 100px;" class="rounded"></el-image>
                  </div>
  
                  <div v-if="row.textareaEdit">
                    <el-input v-model="textarea" placeholder="请输入评价内容" type="textarea" :rows="2"></el-input>
                    <div class="py-2">
                      <el-button type="primary" size="small" @click="review(row)">回复</el-button>
                      <el-button size="small" class="ml-2" @click="row.textareaEdit = false">取消</el-button>
                    </div>
                  </div>
  
                 <template v-else>
                   <div class="mt-3 bg-gray-100 p-3 rounded" v-for="(item,index) in row.extra" :key="index">
                    <h6 class="flex font-bold">
                      客服
                      <el-button type="info" size="small" class="ml-auto" @click="openTextarea(row,item.data)">修改</el-button>
                    </h6>
                    <p>{{ item.data }}</p>
                  </div>
                 </template>
  
                </div>
            </div>
          </template>
        </el-table-column>
  
  
        <el-table-column label="ID" width="70" align="center" prop="id"/>
        <el-table-column label="商品" width="200">
          <template #default="{ row }">
            <div class="flex items-center">
               <el-image :src="row.goods_item ? row.goods_item.cover : ''" fit="fill" :lazy="true" style="width:50px;height:50px;" class="rounded"></el-image>
                <div class="ml-3">
                  <h6>{{ row.goods_item?.title ?? '商品已被删除' }}</h6>
                </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="评价信息" width="200">
          <template #default="{ row }">
            <div>
              <p>用户：{{ row.user.nickname || row.user.username }}</p>
              <p>
                <el-rate
                  v-model="row.rating"
                  disabled
                  show-score
                  text-color="#ff9900"
                />
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="评价时间" width="180" align="center" prop="review_time"/>
        <el-table-column label="状态">
          <template #default="{ row }">
            <el-switch :modelValue="row.status" :active-value="1" :inactive-value="0" :loading="row.statusLoading" :disabled="row.super == 1"  @change="handleStatusChange($event,row)">
            </el-switch>
          </template>
        </el-table-column>
      </el-table>
  
      <div class="flex items-center justify-center mt-5">
          <el-pagination background layout="prev, pager ,next" :total="total" :current-page="currentPage" :page-size="limit" @current-change="getData"/>
      </div>
  
    </el-card>
  </template>
  <script setup>
  import { ref } from "vue"
  import Search from "~/components/Search.vue";
  import SearchItem from "~/components/SearchItem.vue";
  import { toast } from "~/composables/util"
  import {
    getGoodsCommentList,
    updateGoodsCommentStatus,
    reviewGoodsComment
  } from "~/api/goods_comment"
  
  import { useInitTable } from '~/composables/useCommon.js'
  
  const roles = ref([])
  
  const {
    searchForm,
    resetSearchForm,
    tableData,
    loading,
    currentPage,
    total,
    limit,
    getData,
    handleDelete,
    handleStatusChange
  } = useInitTable({
    searchForm:{
      title:""
    },
    getList:getGoodsCommentList,
    onGetListSuccess:(res)=>{
      tableData.value = res.list.map(o => {
          o.statusLoading = false
          o.textareaEdit = false
          return o
      })
      total.value = res.totalCount
      roles.value = res.roles
    },
    updateStatus:updateGoodsCommentStatus
  })
  
  const textarea = ref("")
  const openTextarea = (row,data = "")=>{
    textarea.value = data
    row.textareaEdit = true
  }
  
  const review = (row)=>{
    if(textarea.value == ""){
      return toast("回复内容不能为空","error")
    }
    reviewGoodsComment(row.id,textarea.value)
    .then(res=>{
      row.textareaEdit = false
      toast("回复成功")
      getData()
    })
  }
  </script>